<template>
    <div class="uvpuchartBox">
        <div class="tabBox" v-if="showTab">
            <span :class="{'selected':tabIndex==11}" @click="reGet(11)" v-t="'detail.title11'">Hour</span>
            <span :class="{'selected':tabIndex==5}" @click="reGet(5)" v-t="'detail.title12'">Daily</span>
            <span :class="{'selected':tabIndex==2}" @click="reGet(2)" v-t="'detail.title13'">Monthly</span>
        </div>
        <div class="charts" :id="id"></div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import * as echarts from 'echarts';
import { useI18n } from 'vue-i18n'

export default {
    components:{
       
    },
    props:{
        objectId:'', // 访问对象ID
        visitTypeCode:'', // 访问的类型1-地图，2-场景，3-店铺，4-物品，5-城市，6-广告位，7-道具，8-DAO
        operateType:'',  // 访问量：1-UV,2-PV，趋势图：11-小时，5-天，2-月
        showTab:{
            type:Boolean,
            default:true
        },
        uv:{ // 显示uv折线图
            type:Boolean,
            default:true
        },
        pv:{ // 显示pv折线图
            type:Boolean,
            default:true
        },
        showLegend:{  // 是否显示统计图的legend
            type:Boolean,
            default:true
        },
        id:{  // echart容器id
            type:String,
            default:'charts'
        },
        objectTwoId:'',
        gridBottom:''
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            myChart:'',
            tabIndex:11,
            xAxis_data:[],//['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            series_data:[
                    {
                        // name: 'UV',
                        name: t('detail.uv'),
                        type: 'line',
                        symbol: 'none',
                        itemStyle: { color: '#FF660050'},
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 1,
                                color: '#FF660050'
                            },
                            {
                                offset: 0,
                                color: '#FF6600'
                            }
                            ])
                        },
                        data:[] //[5, 20, 36, 10, 14, 20,9, 39, 11, 5, 8, 16]
                    },
                    {
                        // name: 'PV',
                        name: t('detail.pv'),
                        type: 'line',
                           symbol: 'none',
                         itemStyle: { color: '#FF660050'},
                              areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 1,
                                color: '#FF660050'
                            },
                            {
                                offset: 0,
                                color: '#FF6600'
                            }
                            ])
                        },
                        data: []//[12, 22, 4, 8, 10, 23,6, 11, 19, 22, 14, 10]
                    }
                ]
        })

        onMounted(()=>{
            //addVisit()
            getvisitData(props.operateType)
            
        })

        const addVisit = ()=>{
            store.dispatch('base/add_visit_object',{
                objectId:props.id,
                visitTypeCode:parseInt(props.visitTypeCode),
                walletAddress:state.userInfo.walletAddress
            }).then(res =>{
                state.visitData = res.data || {}
            })
        }

        const getvisitData =(operateType)=>{
            store.dispatch('ad/get_uvpv_chart_data',{
                objectId:props.objectId,
                visitTypeCode:props.visitTypeCode,
                objectTwoId:props.objectTwoId || null,
                operateType,
            }).then(res=>{
                if(res.success){
                    state.xAxis_data =[]
                    state.series_data[0].data = []
                    state.series_data[1].data = []
                    for(let i=0;i<res.data.uvDataList.length;i++){
                        const item = res.data.uvDataList[i]
                        if(i<12){ // 只取12条数据
                            if(operateType ==11){ // 小时显示
                                state.xAxis_data.push(item.name.substr(item.name.length-2,2)+':00')
                            }else{
                                state.xAxis_data.push(item.name)
                            }
                            props.uv && state.series_data[0].data.push(item.value)
                            
                            props.pv && state.series_data[1].data.push(res.data.pvDataList[i])
                        }
                    }
                    if(!props.uv){
                        state.series_data.splice(0,1)
                    }
                    if(!props.pv){
                        state.series_data.splice(1,1)
                    }
                    console.log('series_data:',state.series_data)
                    createChart()
                }
            })
        }

        const reGet = (index)=>{
            state.tabIndex = index
            getvisitData(index)
        }

        const createChart = ()=>{
            // 先销毁
            //state.myChart && echarts.init(document.getElementById(props.id)).dispose();
            state.myChart = echarts.getInstanceByDom(document.getElementById(props.id))
            // 如果不存在，就进行初始化
            if (state.myChart == null) {
                // 基于准备好的dom，初始化echarts实例
                state.myChart = echarts.init(document.getElementById(props.id));
            }
            
            // 绘制图表
            state.myChart.setOption({
                tooltip: {},
                grid: { // 设置图形四周留白大小
                    left: '30px',
                    right: '10px',
                    bottom: props.gridBottom || '20px',
                    top:'20px'
                },
                legend: {
                    bottom:0,
                    textStyle:{color:'#fff'},
                    show: props.showLegend, 
                   // data: ['UV', 'PV']
                },
                xAxis: {
                    axisLabel:{
                        show: true, 
                        //interval:0, // 文字全部显示
                        textStyle:{color:'#fff',fontSize:'10px'},
                    },
                    data: state.xAxis_data
                },
                yAxis: {
                    axisLabel:{
                        show: true, 
                        textStyle:{color:'#fff',fontSize:'10px'},
                    },
                    type:'value',
                    splitLine: {
                        show: true,
                        lineStyle:{
                            type:'dashed',
                            color:'#4C6FA2'
                        }
                    } 
                },
                series: state.series_data
            });
        }

        return{
            ...toRefs(state),
            reGet
        }
    }
}
</script>

<style lang="scss" scoped>
    .uvpuchartBox{
        display: flex;
        width: 100%;
        height: 100%;
        flex-flow: column;
        .charts{
            height: 100%;
            width:100%;
            // flex: 1;
             margin: 0;
        }
        .tabBox{
                display: flex;
                height: 60px;
                line-height: 60px;
                justify-items: center;
                padding: 0 200px;
                span{
                    flex: 1;
                    color: #8098BC;
                    font-size: 24px;
                    font-weight: bold;
                    text-align: center;
                    position: relative;
                    z-index: 10;
                    &::after{
                        content: '';
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        height: 4px;
                        background: #8098BC;
                    }
                    &+span{
                        margin-left: 5px;
                    }
                    &.selected{
                        color: #fff;
                        &::after{
                            background:#fff;
                        }
                    }
                }
            }
    }
</style>